<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import chinaMap from '../../assets/json/china.json';

let chart = ref();
const targetCities = [
  { name: '北京', value: [116.46, 39.92] },
  { name: '乌鲁木齐', value: [87.68, 43.77] },
  { name: '海口', value: [110.35, 20.02] },
  { name: '大连', value: [121.62, 38.92] },
  { name: '福建', value: [118.3, 26.07] },
  { name: '西藏', value: [89.13, 30.86] },
  { name: '上海', value: [121.47, 31.23] },
  // 添加更多城市...
];

const guangdongCoord = [113.28, 23.12];

onMounted(() => {
  chartInit();
});

function chartInit() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(chart.value);
  echarts.registerMap('china', chinaMap);

  // 动态生成箭头数据
  const linesData = chinaMap.features
    .filter((city) => city.properties.name !== '广东')
    .map((city) => ({
      coord: guangdongCoord,
      target: city.properties.cp,
    }));

  // 生成点对点飞行数据
  const pointToPointData = [];
  for (let i = 0; i < targetCities.length; i += 2) {
    if (i + 1 < targetCities.length) {
      pointToPointData.push([{ coord: targetCities[i].value }, { coord: targetCities[i + 1].value }]);
      pointToPointData.push([{ coord: targetCities[i + 1].value }, { coord: targetCities[i].value }]);
    }
  }
  console.log(pointToPointData);
  // for (let i = 0; i < targetCities.length; i++) {
  //   for (let j = i + 1; j < targetCities.length; j++) {
  //     pointToPointData.push([{ coord: targetCities[i].value }, { coord: targetCities[j].value }]);
  //     pointToPointData.push([{ coord: targetCities[j].value }, { coord: targetCities[i].value }]);
  //   }
  // }

  // 指定图表的配置项和数据
  var option = {
    geo: {
      type: 'map',
      map: 'china',
      label: {
        show: true,
        color: '#fff',
        fontSize: 10,
      },
      itemStyle: {
        areaColor: '#4D98FB',
        borderColor: '#fff',
      },
      zoom: 1.2,
      emphasis: {
        label: {
          color: '#333',
        },
        itemStyle: {
          areaColor: '#389bb7',
        },
      },
    },
    series: [
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        label: {
          formatter: '{b}',
          position: 'right',
          show: true,
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: '#f00',
          color: '#f00',
        },
        symbolSize: 20,
        rippleEffect: {
          brushType: 'stroke',
          scale: 3,
        },
        data: targetCities,
      },
      // 箭头动画
      {
        type: 'lines',
        effect: {
          show: true,
          period: 5,
          symbol: 'arrow',
          symbolSize: 10,
        },
        lineStyle: {
          color: '#C1A43C',
          width: 1,
          opacity: 1,
          curveness: 0.1,
        },
        data: linesData.map((line) => [{ coord: line.coord }, { coord: line.target }]),
      },
      // 点对点飞行
      {
        type: 'lines',
        effect: {
          show: true,
          period: 5,
          symbol: 'arrow',
          symbolSize: 10,
        },
        lineStyle: {
          color: '#f00',
          width: 1,
          opacity: 1,
          curveness: 0.1,
        },
        data: pointToPointData,
        // data: [[{ coord: [87.68, 43.77] }, { coord: [116.46, 39.92] }]],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>

<template>
  <div ref="chart" style="width: 100%; height: 600px" :dev="true"></div>
</template>

<style scoped></style>
